<template>
  <div class="body-contant">
    <el-container>
      <el-header>
        <Header />
      </el-header>

      <el-main>
        <el-container>
          <!-- 轮播图 -->
          <div id="test" style="margin-top: 1rem">
            <Rotation />
            <!-- <router-view></router-view> -->
          </div>
        </el-container>
        <div id="test">
          <el-container>
            <el-container class="el-f1">
              <!-- 新闻推荐 -->
              <el-main>
                <!-- Tab 标签页 -->
                <div class="tab_sty">
                  <el-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    effect="plain"
                    @click="clickTO(item.url)"
                    style="text-align: center"
                  >
                    {{ item.label }}
                  </el-tag>
                </div>
                <router-view style="margin-left: 1rem"></router-view>
              </el-main>
            </el-container>

            <!-- 企业热点栏 -->

            <el-container
              class="el-f2"
              style=" border-color: #999; background-color: white; border-radius: 0.3rem; margin-top: 1rem"
            >
              <!-- 热点卡片 -->
              <el-main class="card-main">
                <!-- 48小时热点卡片 -->
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>48小时热点</span>
                    <el-button style="float: right; padding: 1px 0" type="text"
                      >更多>></el-button
                    >
                  </div>
                  <div v-for="o in 4" :key="o" class="text item hot">
                    <p>
                      {{ "48小时热点 " + o }}
                    </p>
                  </div>
                </el-card>

                <!-- 10天热点卡片 -->
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>10天热点</span>
                    <el-button style="float: right; padding: 3px 0" type="text"
                      >更多>></el-button
                    >
                  </div>
                  <div v-for="o in 4" :key="o" class="text item hot">
                    <p>
                      {{ "10天热点 " + o }}
                    </p>
                  </div>
                </el-card>

                <!-- 热点评论卡片 -->
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>10天内热点评论</span>
                    <el-button style="float: right; padding: 3px 0" type="text"
                      >更多>></el-button
                    >
                  </div>
                  <div v-for="o in 4" :key="o" class="text item hot">
                    <p>
                      {{ "48小时热点 " + o }}
                    </p>
                  </div>
                </el-card>
              </el-main>
            </el-container>
          </el-container>
        </div>
      </el-main>
       <el-divider></el-divider>
      <el-footer>
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import Rotation from "../components/Rotation.vue";
export default {
  data() {
    return {
      //   tap 标签页数据
      items: [
        { type: "", label: "新闻事实", id: "1", url: "shishi" },
        { type: "", label: "公司动态", id: "2", url: "gongsi" },
        { type: "", label: "大神风采", id: "3", url: "fengcai" },
        { type: "", label: "关于我们", id: "4", url: "women" },
      ],
    };
  },
  components: {
    Header,
    Footer,
    Rotation,
  },
  methods: {
    // tabs 跳转路由
    clickTO: function(url) {
      // 如果是需要打开新标签页的路由
      // 则执行 window.open 打开新标签页
      // 并跳转到对应的子路由
      if (url == "women") {
        window.open("news");
      } else {
        this.$router.push(url);
      }
    },
  },
};
</script>

<style scoped>
.el-divider{
  background-color:rgb(133, 128, 128);
}
.body-contant {
}
.el-container {
  background-color: rgb(245, 245, 245);
}
.el-header {
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: rgb(197, 245, 245);
}
.el-main {
  padding: 0px;
  /* height: 2000px; */
  /* background-color: rgb(228, 208, 208); */
}
.el-footer {
  padding: 0px;
  height: 20px !important;
}
.el-header h3 {
  float: left;
}
/* 标签页不可选，仿按钮 */
.el-main .tab_sty .el-tag {
  /* user-select: none; */
  width: 8rem;
  margin-left: 5rem;
}

.el-main .tab_sty {
  margin-top: 1rem;
  /* display: flex; */
  align-items: center;
  justify-content: flex-end;
  /* background-color: rgb(197, 245, 245); */
}
#test {
  width: 1200px;
  margin: auto;
}
/* lin_frontend */

* {
  margin: 0px;
  padding: 0px;
  /* user-select: none; */
}
.clearfix span {
  user-select: none;
}

/* 标签按钮的静态央视 */
.el-tag {
  margin-left: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  cursor: pointer;
}
/* 标签页按钮悬浮特效 */
.el-tag:hover {
  border-color: rgb(64, 137, 243);
}

.el-main .card-main {
  padding-top: 1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 0rem;
}
.el-tabs_nav-scroll {
  border: none;
  border-width: 1px;
  /* background-color: aquamarine */
}
/* 新闻推荐卡片效果 */
.s {
  cursor: pointer;
}
.s:hover {
  color: rgb(53, 163, 236);
}
.el-f1 {
  width: 80%;
  float: left;
  border-color: #999;
  background-color: white;
  border-radius: 0.3rem;
  margin-top: 1rem;
  margin-right: 1rem;
  padding-left: 1.5rem;
}
.el-f2 {
  float: left;
  /* background-color: aliceblue; */
  width: 19%;
  margin-left: 1px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 9px;
  user-select: none;
}

.hot p:hover {
  color: rgb(53, 163, 236);
  width: auto;
  cursor: pointer;
  user-select: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  /* height: 23%; */
  margin-bottom: 1rem;
}
</style>
